import { createRouter, createWebHashHistory, RouterView } from "vue-router";
import store from "store";
import { h } from "vue";

const Layout = () => import("views/Layout.vue");

const Index = () => import("views/home/Index.vue");
const TopCategory = () => import("views/category/Index.vue");
const SubCategory = () => import("views/category/SubCategory.vue");
const Goods = () => import("views/goods/Index.vue");
const Login = () => import("views/login/Index.vue");
const Cart = () => import("views/cart/Index.vue");

const PayCheckout = () => import("views/member/pay/Checkout.vue");
const Pay = () => import("views/member/pay/Pay.vue");
const PayResult = () => import("views/member/pay/PayResult.vue");

const MemberLayout = () => import("views/member/Layout.vue");
const MemberHome = () => import("views/member/home/Index.vue");
const MemberOrder = () => import("views/member/order/Index.vue");
const MemberOrderDetail = () => import("views/member/order/Detail.vue");

const routes = [
  // 一级路由布局
  {
    path: "/",
    component: Layout,
    children: [
      {
        path: "/",
        component: Index,
      },
      {
        path: "/category/:id",
        component: TopCategory,
      },
      {
        path: "/category/sub/:id",
        component: SubCategory,
      },
      {
        path: "/product/:id",
        component: Goods,
      },
      {
        path: "/cart",
        component: Cart,
      },
      {
        path: "/member/checkout",
        component: PayCheckout,
      },
      {
        path: "/member/pay",
        component: Pay,
      },
      {
        path: "/pay/callback",
        component: PayResult,
      },
      {
        path: "/member",
        component: MemberLayout,
        children: [
          {
            path: "/member",
            component: MemberHome,
          },
          // {
          //   path: "/member/order",
          //   component: MemberOrder,
          // },
          // {
          //   path: "/member/order/:id",
          //   component: MemberOrderDetail,
          // },
          {
            path: "/member/order",
            //创建一个routerView容器，创建路由嵌套关系
            component: { render: () => h(<RouterView />) },
            children: [
              {
                path: "",
                component: MemberOrder,
              },
              {
                path: ":id",
                component: MemberOrderDetail,
              },
            ],
          },
        ],
      },
    ],
  },
  { path: "/login", component: Login },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
  // 路由跳转滚动到页面顶部
  scrollBehavior() {
    return {
      // vue2
      // y:0,
      // vue3
      top: 0,
    };
  },
});

//全局前置导航守卫
router.beforeEach((to, from, next) => {
  //判断登录状态：地址以/member开头
  const { profile } = store.state.user;
  if (!profile.token && to.path.startsWith("/member")) {
    //未登录
    return next("/login?redirectUrl=" + encodeURIComponent(to.fullPath));
  }
  next();
});

export default router;
